<!--  -->
<template>
  <div class="layout investmentdetails">
    <div class="investment-box">
      <div style="display: flex; justify-content: space-between; margin-top: 20px;">
        <Breadcrumb class="breadcrumb" :crumbs="crumbs" style="margin-bottom: 20px;"></Breadcrumb>
        <!-- <div class="backBtn" @click="goBack()">返回列表</div> -->
      </div>
      <div class="details" v-loading="_loading">
        <div class="introduce">
          <PhoneBox :multiGraphList="multiGraphList" :informationData="informationData"></PhoneBox>
          <div class="information">
            <div class="information_Name ellipsis">{{informationData.buildingName}}</div>
            <div class="information_Type">
              <div class="Initials" v-if="informationData.industryType">
                <div class="word">{{informationData.industryType}}</div>
              </div>
              <div class="Initials" v-if="informationData.buildingType">
                <div class="word">{{informationData.buildingType}}</div>
              </div>
              <div class="Initials" v-if="informationData.buildingDecorationType">
                <div class="word">{{informationData.buildingDecorationType}}</div>
              </div>
              <div class="Initials" v-if="informationData.canRegister == '可注册'">
                <div class="word">{{informationData.canRegister}}</div>
              </div>
              <div class="Initials" v-if="informationData.relatedPoliciesNum != 0">
                <div class="word">政策扶持</div>
              </div>
            </div>
            <el-divider></el-divider>
            <div class="information_Details">
              <div class="Prices">
              <div class="Price" style="margin-right:20px" v-if="informationData.rentMode == 1 || informationData.rentMode == 2">
                出租价格:
                <span>{{informationData.rentMode==1?informationData.rentPrice+''+informationData.rentUnitMeasure:(informationData.rentMode==2?'面议':'')}}</span>
              </div>
              <div
                class="Price"
                v-if="informationData.sellMode == 1 || informationData.sellMode == 2"
              >
                出售价格:
                <span>{{informationData.sellMode==1?informationData.sellingPrice+''+ '元/㎡':(informationData.sellMode==2?'面议':'')}}</span>
              </div>
              </div>
              <div class="information_Introduce">{{informationData.buildingIntroduce}}</div>
              <div class="unified">
                <div class="corporate_Name">{{informationData.address}}</div>
                <div
                  v-if="informationData.floorType != 1 && informationData.floorType"
                  class="corporate_Name"
                >地上{{informationData.aboveGroundFloors}}地下{{informationData.undergroundFloors}}层楼高{{informationData.buildingHeight}}米</div>
                <div
                  v-if="informationData.floorType == 1 && informationData.floorType"
                  class="corporate_Name"
                >单层{{informationData.buildingFloor}}层</div>
                <div class="corporate_Name">{{buildingLeave}}</div>
                <div class="corporate_Name">{{informationData.propertyCompany}}</div>
                <div
                  class="corporate_Name"
                  v-if="(informationData.recommendedStationMinimum && informationData.recommendedStationMaximum) || informationData.recommendedStationMaximum"
                >推荐工位数量{{informationData.recommendedStationMinimum}}~{{informationData.recommendedStationMaximum}}个</div>
              </div>

              <div class="contact_Building">
                <Buttons :buttons="buttons" @check="checkBuildingIsContactedForUser"></Buttons>
              </div>
            </div>
          </div>
        </div>
        <div class="Basic_information">
          <el-tabs v-model="activeName" @tab-click="onTabs">
            <el-tab-pane label="详细信息" name="0">
              <div class="detailed_Information">
                <div class="building_Introduction">
                  <div class="building_Name">
                    <div class="cross_Bar"></div>
                    <div class="nomenclature">楼宇介绍</div>
                  </div>
                  <div class="content">{{this.informationData.buildingIntroduce}}</div>
                </div>
                <div class="building_Introduction">
                  <div class="building_Name Check_in">
                    <div class="cross_Bar"></div>
                    <div class="nomenclature">入住企业信息</div>
                  </div>
                  <div class="content">
                    <span
                      style="margin-right:40px"
                      v-if="informationData.settledEnterpriseInformation"
                    >知名企业:{{informationData.settledEnterpriseInformation}}</span>
                    <span
                      v-if="informationData.highTechEnterprisesNum || informationData.listedEnterprisesNum || informationData.biomedicalEnterpriseNum"
                    >
                      企业数据:
                      <span
                        v-if="informationData.highTechEnterprisesNum"
                      >高新企业{{informationData.highTechEnterprisesNum}}家</span>
                      <span
                        v-if="informationData.listedEnterprisesNum"
                      >上市企业 {{informationData.listedEnterprisesNum}}家</span>
                      <span
                        v-if="informationData.biomedicalEnterpriseNum"
                      >生物医药企业{{informationData.biomedicalEnterpriseNum}}家</span>
                    </span>
                  </div>
                </div>
                <div class="building_Introduction">
                  <div class="building_Name fullName">
                    <div class="cross_Bar"></div>
                    <div class="nomenclature">基础信息</div>
                  </div>
                  <div class="content">
                    <div class="full_Name">
                      <div style="max-width:300px">
                        <div>楼宇名称:{{informationData.buildingName}}</div>
                        <!-- 出租方式不是面议的情况下没填 -->
                        <div
                          v-if="informationData.rentMode == 1 || informationData.rentMode == 2"
                        >出租价格:{{informationData.rentMode == 1 ? informationData.rentPrice + informationData.rentUnitMeasure : "面议"}}</div>
                        <div
                          v-if="informationData.sellMode == 1 || informationData.sellMode == 2"
                        >出售价格:{{informationData.sellMode == 1 ? informationData.sellingPrice + '元/㎡' : "面议"}}</div>
                      </div>
                      <div style="min-width:110px;">
                        <div>起租期:{{informationData.rentTermMinimum}}个月</div>
                        <div>级别:{{buildingLeave}}</div>
                      </div>
                      <div style="margin-right:15px;">
                        <div>出租面积:{{informationData.rentalArea}}㎡</div>
                        <div
                          v-if="informationData.floorType != 1 && informationData.floorType"
                        >楼层:地上{{informationData.aboveGroundFloors}}地下{{informationData.undergroundFloors}}层楼</div>
                        <div
                          v-if="informationData.floorType == 1 && informationData.floorType"
                        >楼层:单层{{informationData.buildingFloor}}层</div>
                      </div>
                      <div>
                        <div>装修:{{buildingDecorationType}}</div>
                        <div
                          v-if="informationData.floorType != 1 && informationData.floorType"
                        >高{{informationData.buildingHeight}}米</div>
                      </div>
                      <div style="margin-right:0;max-width:350px">
                        <div>地址:{{informationData.address}}</div>
                        <div
                          v-if="(informationData.recommendedStationMinimum && informationData.recommendedStationMaximum) || informationData.recommendedStationMaximum"
                        >推荐工位数量:{{informationData.recommendedStationMinimum ? informationData.recommendedStationMinimum : "0"}}~{{informationData.recommendedStationMaximum}}个</div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="building_Introduction">
                  <div class="building_Name property_related">
                    <div class="cross_Bar"></div>
                    <div class="nomenclature">物业相关</div>
                  </div>
                  <div class="content">
                    <div>物业公司:{{informationData.propertyCompany}}</div>
                    <div>服务介绍:{{informationData.propertyCompanyIntroduce}}</div>
                    <div
                      v-if="informationData.hydropowerPrice"
                    >水电价格:{{informationData.hydropowerPrice}}</div>
                    <div
                      v-if="informationData.propertyFee && informationData.propertyPriceUnit"
                    >物业费:{{informationData.propertyFee}} {{getBuildingPropertyPriceUnit(informationData.propertyPriceUnit)}}</div>
                  </div>
                </div>
                <div class="building_Introduction">
                  <div class="building_Name peripheral_supporting">
                    <div class="cross_Bar"></div>
                    <div class="nomenclature">周边配套</div>
                  </div>
                  <div class="content">
                    <div class="full_Name">
                      <div v-if="informationData.restaurantNum || informationData.busStation">
                        <div
                          v-if="informationData.restaurantNum"
                        >餐厅:{{informationData.restaurantNum}}家</div>
                        <div v-if="informationData.busStation">公交车站:{{informationData.busStation}}</div>
                      </div>
                      <div v-if="informationData.apartments || informationData.subwayStation">
                        <div v-if="informationData.apartments">公寓:{{informationData.apartments}}所</div>
                        <div
                          v-if="informationData.subwayStation"
                        >地铁:{{informationData.subwayStation}}</div>
                      </div>
                      <div v-if="informationData.businessDistrict">
                        <div
                          v-if="informationData.businessDistrict || informationData.highSpeedRail"
                        >商圈:{{getBusinessDistrict(informationData.businessDistrict)}}</div>
                        <div v-if="informationData.highSpeedRail">高铁:{{informationData.highSpeedRail}}</div>
                      </div>
                      <div v-if="informationData.hospital || informationData.airport">
                        <div v-if="informationData.hospital">医院:{{informationData.hospital}}</div>
                        <div v-if="informationData.airport">机场:{{informationData.airport}}</div>
                      </div>
                    </div>
                    <!-- <div v-if="informationData.hospital">医院:{{informationData.hospital}}</div>
                    <div v-if="informationData.highSpeedRail">高铁:{{informationData.highSpeedRail}}</div>
                    <div v-if="informationData.airport">机场:{{informationData.airport}}</div> -->
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="关联政策" name="1" v-if="related_PolicyList.length!=0">
              <div class="related_Policy" id="policyList">
                <PolicyFrame
                  v-for="(item,index) in related_PolicyList"
                  :policy="item"
                  title="查看详情"
                  :key="index"
                  class="policy"
                  @click="toPolicyDetail(item.policyId)"
                ></PolicyFrame>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
      <div class="written_Name">
        <ContainerTitle text="相关楼宇推荐" :more="true" @jump="onBuildings"></ContainerTitle>
        <RelatedInformation :list="relatedInformationList" @reset="reset"></RelatedInformation>
      </div>
      <div>
        <!-- 缓存中没有数据的弹框 -->
        <el-dialog top="33vh" class="elDialog" :visible.sync="dialogTableVisible" width="500px" @close="closeDialog"
        destroy-on-close>
          <div class="nameHeader">
            <div class="contactBuilding">联系楼宇</div>
            <div class="apply">申请后获取楼宇联系人联系方式</div>
          </div>
          <el-divider></el-divider>
          <div>
            <el-form
              :model="ruleForm"
              :rules="rules"
              ref="ruleForm"
              label-width="100px"
              class="demo-ruleForm"
            >
              <el-form-item label="联系人:" prop="contacts">
                <el-input v-model="ruleForm.contacts" placeholder="请输入联系人" maxlength="50"></el-input>
              </el-form-item>
              <el-form-item label="联系方式:" prop="phoneNumber">
                <el-input v-model="ruleForm.phoneNumber" placeholder="请输入联系方式" maxlength="11"></el-input>
              </el-form-item>
              <el-form-item label="验证码:" prop="contactNumber">
                <div>
                  <div style="position: absolute;">
                    <el-input
                      style
                      class="inputSMS"
                      v-model="ruleForm.contactNumber"
                      placeholder="请输入短信验证码"
                      @input="onInputSMS"
                    ></el-input>
                    <div v-show="show_mes" class="show_mes">{{nameYzm}}</div>
                  </div>
                  <div style="position: relative; left: 290px;">
                    <a
                      style="text-decoration: underline;color: #367dc7;font-size: 14px;font-family: Microsoft YaHei, Microsoft YaHei-Regular;"
                      @click="onContactNumber"
                      v-if="sendOut==false"
                    >获取验证码</a>
                    <div
                      v-if="sendOut==true"
                      style="position: relative;
    left: 20px;color: #367dc7;"
                    >{{countDown}}重新获取</div>
                  </div>
                </div>
              </el-form-item>
            </el-form>
            <el-dialog top="33vh" width="500px" :visible.sync="innerVisible" append-to-body>
              <div class="nameHeader">
                <div class="contactBuilding" style="max-width:360px;white-space:normal; word-break:break-all;text-align: left;">{{buildingName}}</div>
              </div>
              <el-divider></el-divider>
          <div class="_demo-ruleForm">
            <div class="_contacts">
              <div class="_contacts-title">联系人:</div>
              <div>{{contacts}}</div>
            </div>
            <div class="_phoneNumber">
              <div class="_phoneNumber-title">联系方式:</div>
              <div>
                <span>{{phoneNumber}}</span>
                <a
                  id="copy"
                  style="text-decoration: underline;color: #367dc7;font-size: 14px;font-family: Microsoft YaHei, Microsoft YaHei-Regular;margin-left:20px"
                  @click="onCopy"
                >复制</a>
              </div>
            </div>
          </div>
              <el-divider></el-divider>
              <div slot="footer" class="dialog-footer">
                <el-button class="return" type="primary" @click="onWithinConfirm">确 认</el-button>
              </div>
            </el-dialog>
          </div>
          <el-divider></el-divider>

          <div slot="footer" class="dialog-footer">
            <el-button class="Cancel" @click="onCancel('ruleForm')">取 消</el-button>
            <el-button class="return" type="primary" @click="onConfirm">确 认</el-button>
          </div>
        </el-dialog>
        <!-- 缓存中有数据的弹框 -->
        <el-dialog top="33vh" :visible.sync="hasData" width="500px">
          <div class="nameHeader">
            <div class="contactBuilding" style="max-width:400px;white-space:normal; word-break:break-all;text-align: left;">{{informationData.buildingName}}</div>
          </div>
          <el-divider></el-divider>
            <div class="_demo-ruleForm">
            <div class="_contacts">
              <div class="_contacts-title">联系人:</div>
              <div>{{informationData.contactsPerson}}</div>
            </div>
            <div class="_phoneNumber">
              <div class="_phoneNumber-title">联系方式:</div>
              <div>
                <span>{{informationData.contactsPhone}}</span>
                <a
                  id="copy"
                  style="text-decoration: underline;color: #367dc7;font-size: 14px;font-family: Microsoft YaHei, Microsoft YaHei-Regular;margin-left:20px"
                  @click="onCopy"
                >复制</a>
              </div>
            </div>
          </div>
          <el-divider></el-divider>
          <div slot="footer" class="dialog-footer">
            <el-button class="return" type="primary" @click="()=>{this.hasData = false}">确 认</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import Breadcrumb from '@/components/breadcrumb'
import utilsForm from '@/utils/verification.js'
import PolicyFrame from '@/components/policyFrame'   //   PolicyFrame
import RelatedInformation from './components/relatedInformation'   
import contactRules from '@/formRules/investment/contactRules.js'
import PhoneBox from './components/phoneBox'
import { getVerifyAuthCode, getSendAuthCode, getInvestmentInfo, getPolicyListByBuildingInfoId, getInvestmentList, getCheckBuildingIsContactedForUser } from '@/common/api/investment'

export default {
  mixins: [contactRules],
  components: {
    Breadcrumb,
    PolicyFrame,
    RelatedInformation,
    PhoneBox,
  },
  data() {
    //这里存放数据
    return {
      buttons:[{text:"联系楼宇",type:"success",size:"m",method:"check"}],
      _loading:true,
      hasData: false,
      pageNum: 1,
      pageSize: 10,
      total: null,
      //面包页
      crumbs: [
        {
          label: '招商中心',
          value: 'investment',
        },
        { label: '楼宇列表', value: 'investmentList' },
        { label: '楼宇详情', value: '', choose: true },
      ],
      buildingPropertyPriceUnit: [], // 物业价格单位
      buildingBusinessDistrict: [], // 附近商圈
      multiGraphList: [],
      related_PolicyList: [], //
      information_TypeList: [],
      activeName: '0',
      dialogTableVisible: false, //
      relatedInformationList: [],
      informationData: {},
      positionList: [], //位置
      typeList: [], //类型
      gradeList: [], //等级
      canRegisterList: [], //是否可注册
      buildingDecorationTypeList: [], //装修情况
      buildingLeave: '', //楼宇级别
      buildingDecorationType: '', //装修情况
      manylist: [], //
      Grade: '',
      industryTypeList: [], //楼宇产业领域
      contactid: '', //
      buildingName: '', //
      contacts: '', //获取到的联系人
      phoneNumber: '', //获取到的联系电话
      innerVisible: false,
      sms_auth_type: [], //短信类型
      picture: '',
      count: 0,
      countDown: 120, //发送验证码倒计时
      timer: null, //倒计时定时器
      sendOut: false, //发送验证码
      timeShow: false, //显示倒计时
      rotationId: 0, //轮播图id
      nameMsg: '', //提示错误
      rent_unit_measure: [], //楼宇租金
      show_mes: false, //
      nameYzm: '', //
      fontSize: 0,
      transform: {
        transform: 'translateX(0px)',
      },
    }
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    // 重置实例中的属性
    reset(){
      this.multiGraphList = []
      this.activeName = '0'
      this.picture = ''
      this.rotationId = 0
      this.dictionaryQuery()
    },
    // 关闭弹框时销毁用户已输入的数据
    closeDialog(){
      console.log("触发了close")
      this.ruleForm.contacts = "";
      this.ruleForm.phoneNumber = "";
      this.ruleForm.contactNumber = ""
    },
    /**
     * 跳转到政策详情页面
     */
    toPolicyDetail: function (policy) {
      ns.$router.push(`policyDetail?id=${policy}`)
    },
    getBuildingPropertyPriceUnit(sellPriceUnit) {
      //获得物业价格单位
      const res = this.buildingPropertyPriceUnit.find((item) => {
        return item.dictValue == sellPriceUnit
      })
      // console.log("sellPriceUnit",sellPriceUnit)
      // console.log("物业价格单位",res)
      if (res) {
        return res.dictLabel
      } else {
        return '-'
      }
    },
    getBusinessDistrict(businessDistrict) {
      // 获得附近商圈
      const res = this.buildingBusinessDistrict.find((item) => {
        return item.dictValue == businessDistrict
      })
      if (res) {
        return res.dictLabel
      } else {
        return '-'
      }
    },
    //取 消
    onCancel(formName) {
      var that = this
      this.dialogTableVisible = false
      that.sendOut = false
      that.timeShow = false
      clearInterval(that.timer)
      that.timer = null
      that.countDown = 120
      that.ruleForm = {
        contacts: '', //联系人
        phoneNumber: '', //联系电话
        contactNumber: '', //验证码
      }
      // this.$refs[formName].resetFields()
    },
    //确 认
    onConfirm() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          var contactNumber = (rule, value, callback) => {
            if (value == '') {
              callback(new Error('请输入验证码'))
            } else {
              callback()
            }
          }
          if (this.ruleForm.contactNumber == '') {
            this.show_mes = true
            this.nameYzm = '请输入验证码'
            return
          }

          var data = {
            userPhone: String(this.ruleForm.phoneNumber),
            authType: String(this.sms_auth_type[1].dictValue),
            authCode: this.ruleForm.contactNumber,
            buildingInfoId: this.contactid,
            contactsPerson: this.ruleForm.contacts,
          }
          
          let res = await getVerifyAuthCode(data)
          if (res.code == 200) {
            this.dialogTableVisible = false
            this.innerVisible = true
            this.contacts = res.data.contactsPerson
            this.phoneNumber = res.data.contactsPhone
            this.buildingName = res.data.buildingName
            this.show_mes = false
            // 缓存到localStorage中
            let verifyAuthCode =
              window.localStorage.getItem('verifyAuthCode') || []
            if (verifyAuthCode.length) {
              verifyAuthCode = window.JSON.parse(verifyAuthCode)
            }
            let result = verifyAuthCode.some((item) => {
              return item.buildingInfoId == res.data.buildingInfoId
            })
            console.log(result)
            if (!result) {
              verifyAuthCode.push(res.data)
              verifyAuthCode = window.JSON.stringify(verifyAuthCode)
              window.localStorage.setItem('verifyAuthCode', verifyAuthCode)
            }
            this.onCancel()
          } else {
            this.show_mes = true
            this.nameYzm = res.msg
          }
        } else {
          return false
        }
      })
    },
    onWithinConfirm() {
      this.innerVisible = false
      this.onCancel()
    },
    //复制
    onCopy() {
      var input = document.createElement('input')
      input.value = this.phoneNumber || this.informationData.contactsPhone
      document.body.appendChild(input)
      input.select()
      document.execCommand('copy')
      this.$message.success('复制成功!')
      document.body.removeChild(input)
    },
    onInputSMS() {
      if (this.ruleForm.contactNumber != '') {
        this.show_mes = false
        this.nameYzm = ''
        return
      }
    },
    //获取验证码
    onContactNumber() {
      this.show_mes = false
      var contactsvalidator = (rule, value, callback) => {
        if (value == '') {
          callback(new Error('请输入联系人'))
        } else {
          callback()
        }
      }
      var phoneNumberlidator = (rule, value, callback) => {
        if (value == '') {
          callback(new Error('请输入联系方式'))
        } else {
          callback()
        }
      }
      this.rules = {
        contacts: [{ validator: contactsvalidator, trigger: 'blur' }],
        phoneNumber: [
          { validator: phoneNumberlidator, trigger: 'blur' },
          {
            validator: utilsForm.FormValidate.Form().checkAphone,
            trigger: 'blur',
          },
        ],
      }
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          var data = {
            userPhone: String(this.ruleForm.phoneNumber),
            authType: String(this.sms_auth_type[1].dictValue),
          }
          let res = await getSendAuthCode(data)
          console.log(res)
          if (res.code == 200) {
            this.$message({
              message: '发送成功',
              type: 'success',
            })
            this.sendOut = true
            this.timer = setInterval(this.fusn, 1000)
            window.localStorage.setItem('CHECK', true)
          } else {
            this.sendOut = false
            this.$message.error(res.msg)
          }
        } else {
          this.sendOut = false
          return false
        }
      })
    },
    fusn() {
      var that = this
      that.JuDGE = localStorage.getItem('CHECK')
      that.sendOut = Boolean(that.JuDGE)
      that.timeShow = Boolean(that.JuDGE)
      that.countDown--
      window.localStorage.setItem('TIME', that.countDown)
      if (window.localStorage.getItem('TIME') <= 0) {
        window.localStorage.removeItem('TIME')
        localStorage.removeItem('CHECK')
        localStorage.setItem('CHECK_FALSE', false)
      }
      if (that.countDown <= 0) {
        var check_false = localStorage.getItem('CHECK_FALSE')
        if (check_false == 'false') {
          that.sendOut = false
          that.timeShow = false
        }
        clearInterval(that.timer)
        that.timer = null
        that.countDown = 120
        localStorage.removeItem('CHECK_FALSE')
      }
    },
    onTabs(tab, event) {
      // this.dictionaryQuery()
      // this.buildingInformationDetails()
      this.associatedBuilding()
    },
    onContact_Building() {
      // 获取缓存数据
      let verifyAuthCode = window.localStorage.getItem('verifyAuthCode') || []
      if (verifyAuthCode.length) {
        verifyAuthCode = window.JSON.parse(verifyAuthCode)
      }
      let data = verifyAuthCode.find((i) => {
        return i.buildingInfoId == this.contactid
      })
      if (!data) {
        this.dialogTableVisible = true
      } else {
        this.contacts = data.contactsPerson
        this.phoneNumber = data.contactsPhone
        this.buildingName = data.buildingName
        this.hasData = true
      }
    },
    handleSizeChange(e) {
      let that = this
      that.pageSize = e
      this.associatedBuilding()
    },
    handleCurrentChange(e) {
      let that = this
      that.pageNum = e
      this.associatedBuilding()
    },
    onJump(item) {
      this.$router.push({ path: '/investment/investmentdetails', query: { id: item.id } })
      this.multiGraphList = []
      this.activeName = '0'
      this.picture = ''
      this.rotationId = 0
      this.dictionaryQuery()
      // this.buildingInformationDetails()
    },

    //楼宇信息详情
    async buildingInformationDetails() {
      var id = this.$route.query.id
      // console.log(typeof id, '123')
      id = Number(id)
      let {code, data, msg} = await getInvestmentInfo(id)
      if (code != "200") return this.$message.warning(msg);
      this.informationData = data
      if (this.informationData.buildingVideo == '') {
        var buildingImages = this.informationData.buildingImages.split(',')
        buildingImages.forEach((itemp, indexp) => {
          this.multiGraphList.push({ name: itemp, judge: false, id: indexp })
        })
      } else {
        var buildingVideo = this.informationData.videoCover.split(',')
        var buildingImagesa = this.informationData.buildingImages.split(',')
        console.log("11111",buildingVideo)
        buildingVideo.forEach((itemt, indext) => {
          // debugger
          this.multiGraphList.unshift({
              name: itemt,
              judge: true,
              id: indext,
            })
          buildingImagesa.forEach((itemu, indexu) => {
            this.multiGraphList.push({
              name: itemu,
              judge: false,
              id: indexu + 1,
            })
          })
        })
        console.log(this.multiGraphList, '1234')
      }

      var classificationList = []
      //类型
      this.typeList.forEach((itemq, indexq) => {
        if (this.informationData.buildingType == Number(itemq.dictValue)) {
          this.informationData.buildingType = itemq.dictLabel
        }
      })
      //装修情况
      this.buildingDecorationTypeList.forEach((itema, indexa) => {
        if (
          this.informationData.buildingDecorationType == Number(itema.dictValue)
        ) {
          this.informationData.buildingDecorationType = itema.dictLabel
          this.buildingDecorationType = itema.dictLabel
        }
      })
      //是否可注册
      this.canRegisterList.forEach((items, indexs) => {
        if (this.informationData.canRegister == Number(items.dictValue)) {
          this.informationData.canRegister = items.dictLabel
        }
      })
      //等级
      this.gradeList.forEach((itemy, indexy) => {
        if (this.informationData.buildingLeave == Number(itemy.dictValue)) {
          this.buildingLeave = itemy.dictLabel
        }
      })
      //楼宇产业领域
      this.industryTypeList.forEach((itemr, indexx) => {
        if (this.informationData.industryType == Number(itemr.dictValue)) {
          this.informationData.industryType = itemr.dictLabel
        }
      })
      //楼宇租金
      this.rent_unit_measure.forEach((itemo, indexo) => {
        if (this.informationData.rentUnitMeasure == Number(itemo.dictValue)) {
          this.informationData.rentUnitMeasure = itemo.dictLabel
        }
      })
      // if (this.informationData.relatedPoliciesNum != 0) {
      //   classificationList.push('关联政策')
      // }
      this.information_TypeList = classificationList
      this.associatedBuilding()
      this.buildingRelatedRecommendations()
    },
    //字典方法接口
    async dictionaryQuery() {
      let api = `building_type,building_leave,street_code,building_register_state,building_decoration_type,sms_auth_type,building_industry,rent_unit_measure,building_property_price_unit,building_sell_mode,building_business_district`
      // 调用公共方法中的查询字典表
      this.getDictList(this,api).then(res => {
        this.positionList = res.street_code //位置
        this.typeList = res.building_type //类型
        this.gradeList = res.building_leave //等级
        this.sms_auth_type = res.sms_auth_type //短信类型
        this.canRegisterList = res.building_register_state //是否可注册
        this.buildingDecorationTypeList = res.building_decoration_type //装修情况
        this.industryTypeList = res.building_industry //楼宇产业领域
        this.rent_unit_measure = res.rent_unit_measure //楼宇租金
        this.buildingBusinessDistrict = res.building_business_district
        this.buildingPropertyPriceUnit = res.building_property_price_unit
        this.associatedBuilding()
        this.buildingInformationDetails()
      })
    },

    //关联政策列表
    async associatedBuilding() {
      var data = {
        buildingInfoId: Number(this.informationData.id),
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      }
      let res = await getPolicyListByBuildingInfoId(data)
      if(res.rows && res.rows.length != 0){
        res.rows = res.rows.map((item) => {
          item.id = item.policyId
          return item
        })
      }
      this.related_PolicyList = res.rows
      if (this.related_PolicyList == undefined) {
        this.related_PolicyList = []
      }
      console.log(this.related_PolicyList)
      // console.log(this.related_PolicyList.length)
      this.total = res.total
    },
    //楼宇相关推荐
    async buildingRelatedRecommendations() {
      var pageSize = 6
      var data = {
        buildingInfoId: Number(this.informationData.id),
        pageNum: this.pageNum,
        pageSize: pageSize,
      }
      let res = await getInvestmentList(data)
      this.relatedInformationList = res.rows
      var classificationList = []
      this.relatedInformationList.forEach((item, index) => {
        item.buildingImages = item.buildingImages.split(',')
        //类型
        this.typeList.forEach((itemq, indexq) => {
          if (item.buildingType == Number(itemq.dictValue)) {
            item.buildingType = itemq.dictLabel
          }
        })
        //装修情况
        this.buildingDecorationTypeList.forEach((itema, indexa) => {
          if (item.buildingDecorationType == Number(itema.dictValue)) {
            this.buildingDecorationType = itema.dictLabel
            item.buildingDecorationType = itema.dictLabel
          }
        })
        //是否可注册
        this.canRegisterList.forEach((items, indexs) => {
          if (item.canRegister == Number(items.dictValue)) {
            item.canRegister = items.dictLabel
          }
        })
        //等级
        this.gradeList.forEach((itemy, indexy) => {
          if (item.buildingLeave == Number(itemy.dictValue)) {
            item.Grade = itemy.dictLabel
          }
        })
        //楼宇产业领域
        this.industryTypeList.forEach((itemr, indexx) => {
          if (item.industryType == Number(itemr.dictValue)) {
            item.industryType = itemr.dictLabel
          }
        })
      })
      this.manylist = classificationList
    },
    // 查询用户是否已经联系过此楼宇
    async checkBuildingIsContactedForUser(){
      let res = await getCheckBuildingIsContactedForUser(this.contactid)
      if(!res.data){
        this.dialogTableVisible = true
      }else{
        this.hasData = true
      }
    },
    onBuildings() {
      this.$router.push('/investment/investmentList')
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this._loading = true
    this.contactid = this.$route.query.id
    // await this.associatedBuilding()
    // await this.dictionaryQuery()
    // await this.buildingInformationDetails()
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  async mounted() {
    this.contactid = this.$route.query.id
    // this.associatedBuilding()
    await this.dictionaryQuery()
    this._loading = false
    // this.buildingInformationDetails()
    // this.dictionaryQuery()
    // this.buildingInformationDetails()
  }
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
._demo-ruleForm{
  margin:47px 0 54px 0px;
  text-align: left;
  // max-width:320px;
  white-space:normal; 
  word-break:break-all;
  display:flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  ._contacts{
    margin-bottom:20px;
  }
  ._phoneNumber,._contacts{
    // margin-left: 140px;
    display:flex;
    width: 300px;
    flex-wrap:nowrap
  }
  ._contacts-title,._phoneNumber-title{
    margin:0 10px 0 0;
    flex:0 0 60px;
    text-align: right;
  }
}
.Prices{
  display: flex;
}
.investment-box {
  width: 1200px;
  margin: 0 auto;
  .introduce {
    display: flex;
    margin-bottom: 30px;
    .information {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
        white-space:normal;
        word-break:break-all;
      .information_Name {
        color: #045db9;
        font-size: 36px;
        // height: 35px;
        font-weight: bold;
        font-family: Source Han Sans CN, Source Han Sans CN-Bold;
        flex-wrap: wrap;
        white-space:normal;
        word-break:break-all;
        text-align: left;
      }
      .information_Type {
        display: flex;
        font-size: 11px;
        font-family: Microsoft YaHei, Microsoft YaHei-Regular;
        font-weight: 400;
        text-align: center;
        color: #045db9;
        height: 25px;
        margin: 10px 0px;
        .Initials {
          height: 23px;
          width: 83px;
          margin-right: 10px;
          margin-top: 10px;
          background-color: #f1f2f4;
          text-align: center;
          display: flex;
          align-items: center;
          justify-content: center;
          .word {
          }
        }
      }
      .information_Details {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        color: #333333;
        font-size: 14px;
        font-family: Source Han Sans CN, Source Han Sans CN-Bold;
        font-weight: bold;
        // height: 380px;
        min-height: 380px;
        width: 100%;
        .Price {
          margin-bottom: 15px;
          span {
            color: #d00000;
            font-size: 24px;
            font-family: Source Han Sans CN, Source Han Sans CN-Bold;
            font-weight: bold;
          }
        }
        .information_Introduce {
          width: 100%;
          padding: 10px;
          background-color: #efefef;
          color: #595e64;
          font-family: Microsoft YaHei, Microsoft YaHei-Regular;
          font-size: 14px;
          border-radius: 3px;
          text-align: left;
          margin-bottom: 15px;
          word-wrap: break-word;
          word-break: break-all;
        }
        .unified {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          line-height: 27px;
          width: 100%;
          // height: 135px;
          .corporate_Name {
            // margin-bottom: 15px;
            color: #333333;
            font-size: 14px;
            font-family: Source Han Sans CN, Source Han Sans CN-Regular;
            font-weight: 400;
            text-align: left;
          }
        }

        .contact_Building {
          // position: relative;
          // left: 0;
          // right: 0;
          // top: 44px;
          // bottom: 0;
          margin: 20px 0;
          .contactBuilding {
            background-color: #045db9;
            color: #fff;
            border-radius: 3px;
            width: 108px;
            height: 32px;
            font-size: 14px;
          }
        }
      }
    }
  }
  .Basic_information {
    .detailed_Information {
      width: 100%;
      border: 1px solid #eeeeee;
      padding: 20px;
      margin-bottom: 45px;
      .building_Introduction {
        font-size: 15px;
        font-family: Source Han Sans CN, Source Han Sans CN-Regular;
        font-weight: 400;
        color: #666666;
        margin-bottom: 30px;
        .building_Name {
          color: #045db9;
          font-size: 19px;
          font-family: Source Han Sans CN, Source Han Sans CN-Bold;
          font-weight: bold;
          display: flex;
          height: 19px;
          width: 100px;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 19px;
          .cross_Bar {
            width: 3px;
            height: 19px;
            background-color: #045db9;
          }
          .nomenclature {
          }
        }
        .content {
          text-align: left;
          word-wrap: break-word;
          word-break: break-all;
          line-height: 25px;
          font-size: 15px;
          .full_Name {
            display: flex;
            // justify-content: space-between;
            >div{
              margin-right:33px
            }
          }
        }
        .fullName {
          width: 96px;
        }
        .Check_in {
          width: 135px;
        }
        .property_related {
          width: 96px;
        }
        .peripheral_supporting {
          width: 96px;
        }
      }
    }
    .related_Policy {
      .Related {
        width: 100%;
        border: 1px solid #eeeeee;
        padding: 30px;
        margin-bottom: 20px;
        color: #999999;
        font-size: 15px;
        font-family: Source Han Sans CN, Source Han Sans CN-Regular;
        font-weight: 400;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        .numberCss {
          margin-bottom: 5px;
        }
        .factoryName {
          margin-bottom: 15px;
          font-size: 18px;
          font-family: Source Han Sans CN, Source Han Sans CN-Regular;
          font-weight: 700;
          color: #333333;
          span {
            color: #d00000;
          }
        }
        .contentCss {
          margin-bottom: 15px;
          text-overflow: -o-ellipsis-lastline;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        .browseDate {
          display: flex;
          width: 80%;
          justify-content: space-between;
          span {
            color: #333333;
            font-size: 15px;
            font-family: Source Han Sans CN, Source Han Sans CN-Regular;
            font-weight: bold;
          }
        }
      }
      .paging {
        display: flex;
        justify-content: flex-end;
        line-height: 100px;
      }
      // ::v-deep .policy {
      //   width: 490px !important;
      // }
    }
  }
  ::v-deep .el-divider--horizontal {
    margin: 10px 0;
  }
  ::v-deep .el-tabs__nav-wrap::after {
    background-color: #d00000;
  }
  ::v-deep .el-tabs__active-bar {
    background-color: #d00000;
  }
  ::v-deep .el-tabs__item.is-active {
    color: #ffffff;
    background-color: #d00000;
    width: 100px;
  }
  ::v-deep .el-tabs__item {
    margin-left: 20px;
    padding: 0px;
  }
  ::v-deep.el-tabs--bottom .el-tabs__item.is-bottom:last-child,
  .el-tabs--bottom .el-tabs__item.is-top:last-child,
  .el-tabs--top .el-tabs__item.is-bottom:last-child,
  .el-tabs--top .el-tabs__item.is-top:last-child {
    margin-left: 20px;
  }
  ::v-deep.el-tabs--bottom .el-tabs__item.is-bottom:nth-child(2),
  .el-tabs--bottom .el-tabs__item.is-top:nth-child(2),
  .el-tabs--top .el-tabs__item.is-bottom:nth-child(2),
  .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
    margin-left: 0px;
  }

  ::v-deep .information .el-divider--horizontal {
    margin: 10px 0;
    height: 2px;
    background-color: #045db9;
  }
  ::v-deep .written_Name .el-divider--horizontal {
    margin: 10px 0;
    height: 2px;
    background-color: #045db9;
  }
}
.elDialog {
  ::v-deep .el-divider--horizontal {
    margin: 10px 0px 10px 0px;
    background-color: #dcdfe6;
  }
}
::v-deep .el-dialog__body {
  padding: 0px 0px;
}
.nameHeader {
  display: flex;
  .contactBuilding {
    font-size: 20px;
    font-weight: bold;
    margin-left: 20px;
    border: 0;
  }
  .apply {
    display: flex;
    align-items: flex-end;
    margin-left: 10px;
  }
}
::v-deep .el-form-item {
  // margin-bottom: 0px;
}
// ::v-deep .el-input {
//   right: 25px;
// }

.written_Name {
  font-size: 20px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: bold;
  color: #045db9;
  text-align: left;
  margin-top: 15px;

  .MoreDynamic {
    display: flex;
    justify-content: space-between;
    .written_Words {
    }
    .moreName {
      font-size: 14px;
      color: #333333;
      font-family: Adobe Heiti Std, Adobe Heiti Std-R;
      cursor: pointer;
    }
  }

  .relatedInformation {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px;
    justify-content: flex-start;
    .careful {
      border: 1px solid #cccccc;
      width: 386px;
      margin: 12px 0px;
      box-shadow: 4px 6px 2px 0px rgba(0, 19, 39, 0.06);
      border-radius: 5px;
      margin-right: 14px;
      .pictureCss {
        height: 202px;

        // border: 1px solid red;
        .img {
          height: 200px;
          width: 100%;
          border-radius: 4px 4px 0px 0px;
          object-fit: cover;
        }
      }
      .photocopy {
        // box-shadow: 4px 6px 0px rgba(0, 19, 39, 0.06);
      }
      .building_Information {
        font-size: 14px;
        color: #999999;
        display: flex;
        padding: 10px;
        flex-direction: column;
        align-items: flex-start;
        font-family: Microsoft YaHei, Microsoft YaHei-Regular;
        font-weight: 400;

        .DaxiaName {
          width: 100%;
          margin: 10px 0px;
          color: #333333;
          font-size: 18px;
          font-weight: bold;
          font-family: Source Han Sans CN, Source Han Sans CN-Bold;
        }
        .option {
          width: 100%;
          margin-bottom: 10px;
        }
        .option:last-of-type {
          margin-bottom: 0px;
        }
      }
      .many {
        display: flex;
        font-size: 14px;
        font-weight: 400;
        color: #045db9;
        padding: 0px 10px 10px 10px;
        // justify-content: space-between;
        // width: 300px;
        font-family: Microsoft YaHei, Microsoft YaHei-Regular;
        .multiple_Choice {
          width: 87px;
          height: 30px;
          border-radius: 3px;
          background-color: #f1f2f4;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 2px;
          .Choice_Name {
            display: flex;
            // align-items: center;
            justify-content: center;
            overflow: hidden;
            line-height: 30px;
            height: 30px;
          }
        }
      }
    }
  }
}
.demo-ruleForm {
  ::v-deep.el-dialog__footer {
    padding: 0px 20px 20px;
  }
  ::v-deep .demo-ruleForm {
    // padding-right: 95px;
    color: #595e64;
    font-size: 14px;
    font-family: Microsoft YaHei, Microsoft YaHei-Regular;
    font-weight: 400;
  }
  ::v-deep .el-input__inner {
    border: 1px solid #f1f2f4;
    height: 32px;
    width: 60%;
    display: flex;
  }
  ::v-deep .el-dialog__footer {
    padding: 0px 20px 10px;
  }
  ::v-deep .el-button--primary {
    background: #045db9;
    border: 1px solid #eeeeee;
    width: 65px;
    height: 32px;
  }
  .inputSMS {
    z-index: 999;
    ::v-deep .el-input__inner {
      width: 240px;
    }
  }
  ::v-deep .el-form-item__content {
    display: flex;
  }
}
.return {
  ::v-deep.el-button {
    padding: 0px;
    width: 65px;
    height: 32px;
    background-color: #045db9;
  }
}
.Cancel {
  ::v-deep.el-button {
    padding: 0px;
    border: 1px solid #eeeeee;

    color: #367dc7;
    background: #f1f2f4;

    width: 65px;
    height: 32px;
  }
}
.hide {
  display: none;
}
.show {
  display: block;
}
.show_mes {
  // width: 74px;
  text-align: left;
  line-height: 1;
  font-size: 12px;
  color: red;
}
#policyList {
  display: flex;
  // width: 1000px;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 auto;
}
</style>

<style>

.investmentdetails .is-top .el-tabs__item{
  font-size: 16px;
  font-weight: bold;
}
</style>